/*
* @ddescription: 换货发货弹窗
* @Author: liyujie
* @Date: 2020-12-08
*/
<template>
    <div class="changelogistics">
        <el-dialog
            title="修改物流信息"
            :visible.sync="dialogChangeInfo"
            width="614px"
            :close-on-click-modal="false"
        >
            <div class="wrapLog">
                <div class="itemLog">
                    <p class="item_title">
                        快递公司
                    </p>
                    <el-autocomplete
                        v-model="ruleForm.region"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请选择选择快递公司"
                        @select="handleSelect"
                        @blur="fnClearIpt"
                        size="small"
                        :style="{width: '491px'}"
                    />
                </div>
                <div class="itemLog">
                    <p class="item_title">
                        物流单号
                    </p>
                    <el-input
                        v-model="ruleForm.tracking_no"
                        placeholder="请填写物流单号"
                        size="small"
                        clearable
                    />
                </div>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogChangeInfo = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="submitForm()"
                    :disabled="!ruleForm.region || !ruleForm.tracking_no"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ChangeLogistics',
    data () {
        return {
            dialogChangeInfo: false,
            ruleForm: {
                region: '',
                tracking_no: ''
            },
            expressRm: [],
            expressAll: [],
            iptResult: [],
            timeout: '',
            address: ''
        };
    },
    mounted () {
        this.getExpress(1, resp => {
            this.restaurants = resp;
            this.expressRm = resp;
        });
        this.getExpress(0, resp => {
            this.expressAll = resp;
        });
    },
    methods: {
        /**
         * @description 打开修改物流弹窗
         */
        show (row) {
            this.dialogChangeInfo = true;
            this.apply_no = row.apply_no;
            if(row.return_tracking_info) {
                this.ruleForm.region = row.return_tracking_info.logistics_name;
                this.address = row.return_tracking_info.logistics_no;
                this.ruleForm.tracking_no = row.return_tracking_info.tracking_no;
            }
        },

        /**
         * @description 选择快递公司操作
         */
        fnClearIpt () {
            if (this.iptResult.length == 0) {
                this.ruleForm.region = '';
            }
        },
        querySearchAsync(queryString, cb) {
            var restaurants = null;

            if (queryString == '' || queryString == null) {
                restaurants = this.expressRm;
            } else {
                restaurants = this.expressAll;
            }
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            this.iptResult = results;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 200 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            this.address = item.address;
        },

        /**
         * 获取物流公司信息
         */
        getExpress (no, callback) {
            this.$post('/Logistics/getList', {
                type: no
            }, resp=>{
                if (resp.code == 1) {
                    let list = [];

                    resp.data.list.map((item,index)=>{
                        list.push({
                            value: item.name,
                            address: item.logistics_no
                        });
                    });
                    callback(list);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 物流信息提交
         */
        submitForm () {
            let params = {
                apply_no: this.apply_no,
                type: 5,
                return_logistics_no: this.address,
                return_tracking_no: this.ruleForm.tracking_no
            };

            this.$post('/ShopGoodsOrderCancelApply/verify', params, resp => {
                if (resp.code === 1) {
                    this.dialogChangeInfo = false;
                    this.$emit('update');
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.changelogistics {
    display: flex;
    flex-direction: column;
    .wrapLog {
        display: flex;
        flex-direction: column;
        .itemLog {
            display: flex;
            height: 32px;
            align-items: center;
            margin-top: 24px;
            .item_title {
                color: #555;
                font-size: 14px;
                white-space: nowrap;
                margin-right: 10px;
            }
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        margin-top: 24px;
    }
}
</style>
